<!DOCTYPE html>
<!--
  ~  # coding: utf-8
  ~  # Copyright (C) 2017.  UKP lab
  ~  #
  ~  # Author: Daniil Sorokin (ukp.tu-darmstadt.de/ukp-home/)
  ~  # Licensed under the Apache License Version 2.0
  -->

<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">

    <script src="lib/jquery-3.2.1.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>
    <script src="lib/d3.min.js"></script>

    <script src="main.js"></script>
    <title>Wikidata Relation Extraction Demo</title>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-1 col-md-10 col-sm-12 col-xs-12">
            <div class="page-header">
                <h1>Wikidata Context-Aware Relation Extraction</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-1 col-md-10 col-sm-12 col-xs-12">
            <div class="form-group">
                <label for="questionField">Your text</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="questionField" name="inputtext" placeholder="Input sentence"
                           value="Star Wars VII is an American space opera epic film directed by  J. J. Abrams.">
                    <span class="input-group-btn">
                        <input id="getanswerbutton" class="btn btn-default" type="button" value="Parse">
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="progressRow">
        <div class="col-md-offset-1 col-md-10 col-sm-12 col-xs-12">
            <div class="progress collapse">
                <div class="progress-bar progress-bar-striped active" role="progressbar"
                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
                </div>
            </div>
        </div>
    </div>
    <div class="row resultsrow" id="answerRow">
        <div class="col-md-offset-1 col-md-10 col-sm-12 col-xs-12">
            <div class="panel panel-success collapse">
                <div class="panel-heading">
                    <h3 class="panel-title" style="display: inline">Result</h3>
                </div>
                <div class="panel-body" id="answerField">
                    <svg width="100%" height="500"></svg>
                </div>
            </div>
            <div class="panel panel-danger collapse">
                <div class="panel-heading">
                    <h3 class="panel-title">Failed</h3>
                </div>
                <div class="panel-body">
                    Something went wrong
                </div>
            </div>
        </div>
    </div>
    <!-- Processing Info -->
    <div class="row resultsrow" id="statisticsRow">
        <div class="col-md-offset-1 col-md-10 col-sm-12 col-xs-12">
            <div class="panel panel-default collapse">
                <div class="panel-heading">
                    <h3 class="panel-title">Statistics</h3>
                </div>
                <div class="panel-body" id="statsField">
                </div>
            </div>
        </div>
    </div>

</div>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-1 col-md-10 col-sm-12 col-xs-12">
                Daniil Sorokin | <a href="http://aclweb.org/anthology/D17-1188">Reference paper</a>
                | <a href="https://www.ukp.tu-darmstadt.de/">UKP Lab</a>, Technische Universität Darmstadt, 2017 | Prof. Dr. Iryna Gurevych
            </div>
        </div>
    </div>
</div>
<script>

    $( document ).ready(TheApp.init());

</script>
</body>
</html>